<template>
	<view class="main">
		<uni-popup ref="inputDialog" background-color="#fff" :mask-click="false">

			<form @submit="formSubmit" @reset="formReset">

				<view class="form">
					<view style="color: red;text-align: center;">
						···密码为英文加数字的6~18位的字符···
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">旧登录密码</view>
						<input class="uni-input" name="nickname" placeholder="请输入旧登录密码" type="password" maxlength="18"
							v-model="oldPwd" />
					</view>
					<view>
						<view class="uni-form-item uni-column">
							<view class="title">新登录密码</view>
							<input class="uni-input" name="nickname" type="password" maxlength="18" v-model="newPwd"
								placeholder="请输入新登录密码" />
						</view>
						<view class="uni-form-item uni-column">
							<view class="title">确认新登录密码</view>
							<input class="uni-input" name="nickname" type="password" maxlength="18"
								v-model="repeatNewPwd" placeholder="请输入以确认新登录密码" />
						</view>
					</view>
					<view class="btn-layout">
						<button class="btn" type="default" size="normal" @click.stop="cancel">取消</button>
						<button class="btn" type="primary" size="normal" @click.stop="confirm">确定</button>
					</view>
				</view>

			</form>

		</uni-popup>
	</view>
</template>

<script>
	import CommonNavBar from "components/common/NavBar/CommonNavBar";

	import {
		isValidPwd,
		updatePwd
	} from "network/user";

	export default {
		components: {
			CommonNavBar,
		},
		data() {
			return {
				oldPwd: "",
				newPwd: "",
				repeatNewPwd: "",

			};
		},
		mounted() {
			this.$refs.inputDialog.open('center')
		},
		computed: {
			validNewPwd() {
				return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/.test(this.newPwd);
			},
			validRepeatPwd() {
				return this.validNewPwd && this.newPwd == this.repeatNewPwd;
			},
		},
		methods: {
			async confirm() {
				if (!this.oldPwd.length || !this.newPwd.length || !this.repeatNewPwd.length) {
					this.error('内容不能为空');
				}
				if (this.validRepeatPwd) {
					let oldPwd = {
						pwd: this.oldPwd,
					};
					await isValidPwd(oldPwd).then(async (res) => {
						if (!res[1].data.tag) {
							this.error('旧登录密码错误');
						} else {
							let newPwd = {
								pwd: this.newPayPwd,
							};

							await updatePwd(newPwd).then(async (res) => {
								if (res[1].data.tag) {
									await this.success('更新密码成功');
									this.$emit("add");
									this.$emit("done");
								} else {
									await this.error('更新密码失败');
									this.$emit("done");
								}
							});
						}
					});


				} else {
					this.error('密码不合法');
				}

			},
			async cancel() {
				this.$emit("done");
			},
			setPwd() {
				this.$refs["Form"].validate((valid) => {
					if (valid) {
						let pwd = {
							pwd: this.form.oldPwd,
						};
						isValidPwd(JSON.stringify(pwd)).then(async (res) => {
							if (res[1].data.tag) {
								let pwd = {
									pwd: this.form.newPwd,
								};
								await updatePwd(JSON.stringify(pwd)).then(async (res) => {
									if (res[1].data.tag) {
										await this.success("更新密码成功");
										this.$emit("done");
									} else {
										await this.error("更新密码失败");
										this.$emit("done");
									}
								});
							} else {
								this.error("密码错误");
							}
						});
					} else {
						this.warning("信息不合法");
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.form {
		width: 80vw;
		padding: 10rpx 20rpx;
	}

	.btn-layout {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 20rpx auto;
	}

	.btn {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>
